import React, { Component } from 'react'

export default class App extends Component {
  a = 100
  render() {
    return (
      <div>
        <input></input>
        <button onClick={() => { console.log('click') }}>按钮</button>
        {/* this.handelAdd不加()，加了以后打开页面会立即执行，点击按钮时将不再执行 */}
        <button onClick={ this.handelAdd }>add1</button>
        {/* 改变this指向 */}
        <button onClick={ this.handelAdd2.bind(this) }>add2</button>
        <button onClick={ this.handelAdd3 }>add3</button>
        {/* 推荐 */}
        <button onClick={ () => { this.handelAdd4()} }>add4</button>


      </div>
    )
  }
  handelAdd() {
    console.log(this.a); // 报错，this为undefined
  }
  handelAdd2() {
    console.log(this.a); // 100
  }
  handelAdd3 = () => {
    console.log(this.a); // 100
  }
  handelAdd4() {
    console.log(this.a); // 100
  }
}

/**
 * call 改变this指向，自动执行函数
 * apply 改变this指向，自动执行函数
 * bing 改变this指向，不会自动执行，手动添加()执行函数
 */
// var obj1 = {
//   name: 'obj1',
//   getName() {
//     console.log(this.name);
//   }
// }

// var obj2 = {
//   name: 'obj2',
//   getName() {
//     console.log(this.name);
//   }
// }

// obj1.getName() // obj1
// obj2.getName() // obj2
// obj1.getName.call(obj2) // obj2
// obj1.getName.apply(obj2) // obj2
// obj1.getName.bind(obj2) // 不会主动执行
// obj1.getName.bind(obj2)() // obj2


